<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import enterprise0 from '@/assets/images/enterprise-0.png'
import enterprise1 from '@/assets/images/enterprise-1.png'
import enterprise2 from '@/assets/images/enterprise-2.png'
import enterprise3 from '@/assets/images/enterprise-3.png'
import store0 from '@/assets/images/store-0.png'
import store1 from '@/assets/images/store-1.png'
import store2 from '@/assets/images/store-2.png'
import store3 from '@/assets/images/store-3.png'
export default {
  name: 'MapContainer.vue',
  props: {
    mapData: {
      type: Array,
      default: () => ([])
    }
  },
  mounted() {
    this.initAMap();
  },
  destroyed() {
    this.map?.destroy();
  },
  methods: {
    getIcon(status, type) {
      let img;
      if (type === 'store') {
        if (status === 0) {
          img = store0
        }
        if (status === 1) {
          img = store1
        }
        if (status === 2) {
          img = store2
        }
        if (status === 3) {
          img = store3
        }
      }
      if (type === 'enterprise') {
        if (status === 0) {
          img = enterprise0
        }
        if (status === 1) {
          img = enterprise1
        }
        if (status === 2) {
          img = enterprise2
        }
        if (status === 3) {
          img = enterprise3
        }
      }
      return {
        type: "image", //图标类型，现阶段只支持 image 类型
        image: img, //可访问的图片 URL
        size: [16, 16], //图片尺寸
        anchor: "center", //图片相对 position 的锚点，默认为 bottom-center
      }
    },
    initAMap() {
      AMapLoader.load({
        key: "55cb525a978aaf0faf22f51b4ffe8638", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "2D", // 是否为3D地图模式
            zoom: 15, // 初始化地图级别
            center: this.mapData[0].position, // 初始化地图中心点位置
          });
          const labelsLayer = new AMap.LabelsLayer({
            zooms: [3, 20],
            zIndex: 1000,
            collision: false, //该层内标注是否避让
            allowCollision: false, //不同标注层之间是否避让
          });
          //创建 LabelMarker
          const labelMarkers = []
          for (let i = 0; i < this.mapData.length; i++){
            const labelMarker = new AMap.LabelMarker({
              name: this.mapData[i].id, //此属性非绘制文字内容，仅为标识使用
              position: this.mapData[i].position,
              zIndex: 16,
              rank: i, //避让优先级
              icon: this.getIcon(this.mapData[i].status, this.mapData[i].type), //标注图标，将 icon 对象传给 icon 属性
              text: {
                content: this.mapData[i].name, //要展示的文字内容
                direction: "right", //文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
                offset: [-3, -2], //在 direction 基础上的偏移量
                //文字样式
                style: {
                  fontSize: 12, //字体大小
                  fillColor: "#f00", //字体颜色
                  strokeColor: "#fff", //描边颜色
                  strokeWidth: 2, //描边宽度
                },
              }, //标注文本，将 text 对象传给 text 属性
            });
            labelMarkers.push(labelMarker)
          }
          // for (const item of this.mapData) {
          //   const labelMarker = new AMap.LabelMarker({
          //     name: item.id, //此属性非绘制文字内容，仅为标识使用
          //     position: [item.position[0] - 0, item.position[1] - 0],
          //     zIndex: 16,
          //     rank: 1, //避让优先级
          //     icon: this.getIcon(item.status, item.type), //标注图标，将 icon 对象传给 icon 属性
          //     text: {
          //       content: item.name, //要展示的文字内容
          //       direction: "right", //文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
          //       offset: [-3, -2], //在 direction 基础上的偏移量
          //       //文字样式
          //       style: {
          //         fontSize: 12, //字体大小
          //         fillColor: "#f00", //字体颜色
          //         strokeColor: "#fff", //描边颜色
          //         strokeWidth: 2, //描边宽度
          //       },
          //     }, //标注文本，将 text 对象传给 text 属性
          //   });
          //   labelMarkers.push(labelMarker)
          // }


          //添加一个 labelMarker
          // labelsLayer.add(labelMarker);
          // 批量添加 labelMarker
          labelsLayer.add(labelMarkers)
          // 移除 LabelMarker
          // labelsLayer.remove(labelMarker)
          // 批量移除 labelMarker
          // labelsLayer.remove([labelMarker1, labelMarker2])

          // 将 LabelsLayer 添加到地图实例
          this.map.add(labelsLayer);
        })
        .catch((e) => {
          console.log(e);
        });
    }
  }
}
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>
